<template>
  <div class="multipleForm">
    <el-form label-width="80px" label-position="left" size="mini">
      <el-form-item label="水平方式">
        <el-tooltip content="左对齐" placement="top">
          <i
            class="el-icon-s-fold icon"
            @click="handlePostionSelect('left')"
          ></i>
        </el-tooltip>
        <el-tooltip content="平均分布" placement="top">
          <i
            class="el-icon-s-operation icon"
            @click="handlePostionSelect('center')"
          ></i>
        </el-tooltip>
        <el-tooltip content="右对齐" placement="top">
          <i
            class="el-icon-s-unfold icon"
            @click="handlePostionSelect('right')"
          ></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="垂直方式">
        <el-tooltip content="顶对齐" placement="top">
          <i
            class="el-icon-s-fold icon"
            @click="handlePostionSelect('top')"
          ></i>
        </el-tooltip>
        <el-tooltip content="平均分布" placement="top">
          <i
            class="el-icon-s-operation icon"
            @click="handlePostionSelect('middle')"
          ></i>
        </el-tooltip>
        <el-tooltip content="底对齐" placement="top">
          <i
            class="el-icon-s-unfold icon"
            @click="handlePostionSelect('bottom')"
          ></i>
        </el-tooltip>
      </el-form-item>
      <!-- <el-form-item label-width="0">
        <el-button
          type="primary"
          size="mini"
          class="block"
          @click="handleDeleteSelect"
          >删除</el-button
        >
      </el-form-item>
      <el-form-item label-width="0">
        <el-button
          type="danger"
          size="mini"
          class="block"
          @click="handleFloder"
          >成组</el-button
        >
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'MultipleForm',
  inject: ["designerComponent"],
  data() {
    return {
      selectCount: {},
    };
  },
  methods: {
    // 通过id获取激活组件的配置
    findWidgetById(){
      let temp = []
      this.designerComponent.widgets.map(item => {
        if(this.designerComponent.widgetIndex.includes(item.id)) {
          temp.push(item)
        }
      })
      return temp
    },
    handlePostionSelect(postion) {
      this.handleCalcPostionSelect();
      const x1 = this.selectCount.minLeft;
      const x2 = this.selectCount.maxLeft;
      const y1 = this.selectCount.minTop;
      const y2 = this.selectCount.maxTop;
      const z1 = this.selectCount.allLeft.sort((a,b) => a.left-b.left).filter(item => item.left !== x1 && item.left !== x2);
      const z2 = this.selectCount.allTop.sort((a,b) => a.top-b.top).filter(item => item.top !== y1 && item.top !== y2);
      if (postion === "left") {
        this.handleMoveSelectList(x1, undefined, true, postion);
      } else if (postion === "center") {
        this.handleMoveSelectList({x1, x2, z1}, undefined, true, postion);
      } else if (postion === "right") {
        this.handleMoveSelectList(x2, undefined, true, postion);
      } else if (postion === "top") {
        this.handleMoveSelectList(undefined, y1, true, postion);
      } else if (postion === "middle") {
        this.handleMoveSelectList(undefined, {y1, y2, z2}, true, postion);
      } else if (postion === "bottom") {
        this.handleMoveSelectList(undefined, y2, true, postion);
      }
    },
    handleMoveSelectList(left, top, type, postion) {
      // console.log(left, top, type, postion);
      const activeWidget = this.findWidgetById()
      activeWidget.forEach((ele) => {
        const position = ele.value.position;
        //水平情况
        if (left) {
          // 平均分布
          if (postion === "center") {
            // 算出平均值
            const average = parseInt((left.x2 - left.x1) / (left.z1.length + 1))
            // 重置中间项的left值
            const newz1 = left.z1.map((item, index) => ({
              ...item,
              left: left.x1 + (average * (index+1))
            }))
            // 循环赋值
            newz1.map(item => {
              if (ele.id === item.id) {
                position.left = item.left;
              }
            })

            return
          }
          // 左右对齐
          position.left = left
        }
        //垂直情况
        if (top) {
          // 平均分布
          if (postion === "middle") {
            // 算出平均值
            const average = parseInt((top.y2 - top.y1) / (top.z2.length + 1))
            // 重置中间项的top值
            const newz1 = top.z2.map((item, index) => ({
              ...item,
              top: top.y1 + (average * (index+1))
            }))
            // 循环赋值
            newz1.map(item => {
              if (ele.id === item.id) {
                position.top = item.top;
              }
            })
            return
          }
          // 上下对齐
          position.top = top
        }
      });
    },
    //计算多选状态下的最大边界值
    handleCalcPostionSelect() {
      this.selectCount.minLeft = 99999; // left最小值
      this.selectCount.maxLeft = 0; // left最大值
      this.selectCount.minTop = 99999; // top最小值
      this.selectCount.maxTop = 0; // top最大值
      this.selectCount.allLeft = [] // 所有left
      this.selectCount.allTop = [] // 所有top
      const activeWidget = this.findWidgetById()
      // console.log(activeWidget,'activeWidget');
      activeWidget.forEach((ele) => {
        const position = ele.value.position
        const left = position.left;
        const top = position.top;
        this.selectCount.allLeft.push({id: ele.id, left})
        this.selectCount.allTop.push({id: ele.id, top})
        // left最小值
        if(this.selectCount.minLeft > left) {
          this.selectCount.minLeft = left
        }
        // left最大值
        if(this.selectCount.maxLeft < left) {
          this.selectCount.maxLeft = left
        }
        // top最小值
        if(this.selectCount.minTop > top) {
          this.selectCount.minTop = top
        }
        // // top最大值
        if(this.selectCount.maxTop < top) {
          this.selectCount.maxTop = top
        }
      });
    },
    //批量成组
    handleFloder() {
      let floder = {
        title: "文件夹",
        name: "文件夹",
        index: uuid(),
        children: [],
      };
      this.active.forEach((index) => {
        const params = this.findnav(index);
        floder.children.push(params.obj);
        delete params.parent.splice(params.count, 1);
      });
      this.nav.push(floder);
      this.handleInitActive();
    },
    //批量删除
    handleDeleteSelect() {
      this.$confirm(`是否批量删除所选图层?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.active.forEach((index) => {
          const params = this.findnav(index);
          delete params.parent.splice(params.count, 1);
        });
        this.handleInitActive();
      });
    },
  }
};
</script>
<style lang="less" scoped>
.multipleForm {
  .icon {
    margin: 0 10px;
    font-size: 18px;
  }
}
</style>
